<template>
  <PermissionContainer
    :jiBieArr="[2]"
    :tipArr="[, '优惠方案只对站点级别开放', '', , '']"
  >
    <div style="padding-top: 5px">
      <!--固态等级-->
      <p style="margin: 5px">
        <el-button
          class="settingButton"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >添加等级</el-button
        >
      </p>
      <el-table :data="settingList">
        <af-table-column label="油品名称" align="left" prop="oilName" />
        <af-table-column label="等级名称" align="left" prop="grade" />
        <af-table-column label="会员条件(元)" align="left">
          <template slot-scope="scope">
            {{ scope.row.memberConditStart }} ≤累计历史消费金额&lt;{{
              scope.row.memberConditEnd
            }}
          </template>
        </af-table-column>

        <af-table-column
          label="优惠金额(元/L或元/kg)"
          align="left"
          prop="discountAmt"
        />
        <af-table-column
          label="操作"
          align="left"
          class-name="small-padding fixed-width "
          width="100px"
        >
          <template slot-scope="scope">
            <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          > -->
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </af-table-column>
      </el-table>
      <!-- 添加或修改客户优惠等级设置对话框 -->
      <el-dialog
        :title="title"
        :visible.sync="open"
        width="500px"
        append-to-body
      >
        <el-form ref="form" :model="form" :rules="rules" label-width="90px">
          <el-form-item label="油品名称" prop="oilName">
            <el-select
              v-model="form.oilName"
              placeholder="油品名称"
              clearable
              size="small"
              @change="oilNameChange"
            >
              <el-option
                v-for="dict in oilNameOptions"
                :key="dict.oilName"
                :label="dict.oilName"
                :value="dict.oilName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="等级名称" prop="grade">
            <el-input v-model="form.grade" placeholder="请输入等级名称" />
          </el-form-item>
          <el-form-item label="会员条件" prop="memberConditEnd" required>
            <div>
              <el-input-number
                v-model="form.memberConditStart"
                style="width: 110px"
                size="mini"
                :min="0"
              />
              ≤累计消费金额(元)&lt;
              <el-input-number
                v-model="form.memberConditEnd"
                style="width: 110px"
                size="mini"
                :min="0"
              />
            </div>
            <span
              ><font style="color: red; size: 10px"
                >注：优惠条件按照累计历史消费金额计算</font
              ></span
            >
          </el-form-item>
          <el-form-item label="优惠金额" prop="discountAmt">
            <el-input-number
              v-model="form.discountAmt"
              size="mini"
              :min="0"
              placeholder="请输入优惠金额"
            />
            元/<span>{{ oilType == "4" ? "kg" : "L" }}</span>
          </el-form-item>
          <el-form-item label="类型" v-show="false" prop="growthValue">
            <el-input v-model="form.gradeType" value="1" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </PermissionContainer>
</template>

<script>
import {
  listSetting,
  delSetting,
  addSetting,
  updateSetting,
} from "@/api/customer/setting";
import { queryOilType } from "@/utils/oil";

import { listPrice } from "@/api/station/price";
export default {
  name: "Customer_Grade",
  data() {
    const validatorMemberConditEnd = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请填入会员条件"));
        return;
      }
      const start = +this.form.memberConditStart;
      const end = +value;
      if (isNaN(start) || isNaN(end)) {
        callback(new Error("请填入数字"));
        return;
      }
      if (start >= end) {
        callback(new Error("请检查数字逻辑有效性"));
        return;
      }
      callback();
    };
    return {
      pageStatus: 0,
      // 总条数
      total: 0,
      oilType: 0,
      settingList: [],
      //下拉油品名称
      oilNameOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        oilName: [{ required: true, message: "请填写联系人", trigger: "blur" }],
        grade: [{ required: true, message: "请填写等级名称", trigger: "blur" }],
        memberConditEnd: [
          { validator: validatorMemberConditEnd, trigger: "change" },
        ],
        discountAmt: [
          { required: true, message: "请填写优惠金额", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
    listPrice().then((response) => {
      this.oilNameOptions = response.rows;
    });
  },
  methods: {
    /** 查询客户优惠等级设置列表 */
    getList() {
      listSetting(this.queryParams).then((response) => {
        this.settingList = response.rows;
        this.total = response.total;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },

    oilNameChange(val) {
      queryOilType(val).then((res) => {
        this.oilType = res;
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
      this.title = "添加客户优惠等级";
      this.form = {};
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      const id = row.id;
      this.form = row;
      this.open = true;
      this.title = "修改客户优惠等级";
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateSetting(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addSetting(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id;
      this.$confirm("确认删除该条等级优惠信息?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delSetting(ids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
  },
};
</script>
<style>
.two {
  margin-top: 30px;
}
.settingButton {
  border: 0px;
  float: right;
}
.cutLine {
  width: 65px;
  height: 2px;
  background: #71f332;
  /*margin-top: 5px;*/
  margin-left: 5px;
  margin-bottom: 20px;
}
.textlineHeader {
  /*margin-bottom: 20px;*/
  font-family: Bahnschrift;
  /*text-shadow: #32a9f3 1px 1px 1px;*/
  /*font-size: ;*/
  color: #32a9f3;
}
</style>
